<template>
	<view>
		<view :class="{'u-flex':on,'u-row-left':on,'item':!on,'item-on':on,'u-border-bottom':on}" class="list"
			@tap="goProduct(info)">
			<view>
				<image :src="info.image" :class="{'image-on':on,'image':!on}" />
			</view>
			<view :class="{'info-on':on,'info':!on}">
				<view class="u-line-1">{{info.storeName}}</view>
				<view :class="{'level-on':on,'level':!on}">

				</view>
				<view class="wm_weight_flod u-flex u-row-between" style="align-items: flex-end;">
					<view style="width: 400rpx;">
						<priceStyle :info="info" />
						<view style="font-weight: 500;text-decoration:line-through" class="sales">￥{{info.costPrice}}
						</view>
					</view>
					<view class="u-flex u-row-left">
						<view class="btn1">
							{{info.people}}人团
						</view>
						<view class="btn2">
							去拼团
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import priceStyle from '@/components/priceStyle.vue'
	import {
		goNav
	} from '@/lib/Comment.js'
	export default {
		components: {
			priceStyle
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			on: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		methods: {
			goProduct(item) {
				goNav("/pages/sub/store/detail?id=" + item.productId + "&p=" + item.id)
			}
		}
	}
</script>

<style scoped lang="scss">
	.item-on {
		padding: 20rpx 0;

	}

	.item {
		margin-bottom: 20rpx;
		border-radius: 15rpx;
	}

	.list {
		font-size: 30rpx;
		color: #3b3b3b;
		background-color: #FFFFFF;

	}

	.image {
		height: 355rpx;
		width: 100%;
		border-radius: 15rpx 15rpx 0 0;
	}

	.image-on {
		height: 180rpx;
		width: 180rpx;
	}

	.info-on {
		height: 180rpx;
		margin-left: 20rpx;
		width: calc(100% - 240rpx);
	}

	.info {
		padding: 20rpx;

		line-height: 50rpx;
	}

	.level-on {
		height: 40rpx;
	}

	.level {}

	.sales {
		color: #a5a5a5;
	}

	.text {
		background-color: $theme-color;
		font-size: 26rpx;
		padding: 5rpx 10rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
		color: #5e5e5e;
	}

	.btn1 {
		line-height: 60rpx;
		background-color: rgba(247, 225, 223, 1);
		font-size: 26rpx;
		color: rgba(216, 68, 100, 1.0);
		width: 140rpx;
		text-align: center;
		border-radius: 30rpx 0 0 30rpx;
	}

	.btn2 {
		line-height: 60rpx;
		background-color: #D64431;
		font-size: 26rpx;
		color: #FFF;
		width: 140rpx;
		text-align: center;
		border-radius: 0 30rpx 30rpx 0;
	}
</style>
